import { defineComponent, PropType } from 'vue'
import { RouterLink, RouteLocationRaw } from 'vue-router'
import styles from './styles.module.less'

type INavs = { to: RouteLocationRaw; label: string }[]

export default defineComponent({
  name: 'TopNavs',
  props: {
    navs: { type: Array as PropType<INavs>, default: () => [] },
  },

  setup(props) {
    return () => (
      <section class={styles.top_navs}>
        {props.navs.map((v, i) => (
          <RouterLink key={`${v.label}_${i}`} class={styles.item} activeClass={styles.item_active} to={v.to}>
            <span>{v.label}</span>
          </RouterLink>
        ))}
      </section>
    )
  },
})
